<template>
  <div class="settings-container">
    <h1 class="settings-title">设置</h1>
    
    <el-card class="settings-card">
      <el-tabs type="border-card">
        <el-tab-pane label="基本设置">
          <div class="settings-section">
            <h2>应用设置</h2>
            
            <el-form :model="appSettings" label-width="120px">
              <el-form-item label="主题模式">
                <el-radio-group v-model="appSettings.theme">
                  <el-radio-button label="light">浅色</el-radio-button>
                  <el-radio-button label="dark">深色</el-radio-button>
                  <el-radio-button label="system">跟随系统</el-radio-button>
                </el-radio-group>
              </el-form-item>
              
              <el-form-item label="主题色">
                <el-color-picker v-model="appSettings.primaryColor" show-alpha></el-color-picker>
              </el-form-item>
              
              <el-form-item label="开机自启">
                <el-switch v-model="appSettings.autoStart"></el-switch>
              </el-form-item>
              
              <el-form-item label="最小化到托盘">
                <el-switch v-model="appSettings.minimizeToTray"></el-switch>
              </el-form-item>
              
              <el-form-item label="语言">
                <el-select v-model="appSettings.language">
                  <el-option label="简体中文" value="zh-CN"></el-option>
                  <el-option label="English" value="en-US"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="高级设置">
          <div class="settings-section">
            <h2>开发者选项</h2>
            
            <el-form :model="devSettings" label-width="120px">
              <el-form-item label="开发者模式">
                <el-switch v-model="devSettings.devMode"></el-switch>
              </el-form-item>
              
              <el-form-item label="调试日志级别">
                <el-select v-model="devSettings.logLevel">
                  <el-option label="错误" value="error"></el-option>
                  <el-option label="警告" value="warn"></el-option>
                  <el-option label="信息" value="info"></el-option>
                  <el-option label="调试" value="debug"></el-option>
                </el-select>
              </el-form-item>
              
              <el-form-item label="API端点">
                <el-input v-model="devSettings.apiEndpoint"></el-input>
              </el-form-item>
              
              <el-form-item label="缓存清理">
                <el-button type="warning" @click="clearCache">清除缓存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="关于">
          <div class="settings-section">
            <div class="about-app">
              <img src="@/assets/logos/logo.png" alt="Logo" class="app-logo" />
              <h2>Electron Vue3 Vite App</h2>
              <p class="version">版本: 1.0.0</p>
              <p>一个美观大气、高效易用的桌面应用开发框架</p>
              
              <div class="system-info">
                <h3>系统信息</h3>
                <el-descriptions :column="1" border size="small">
                  <el-descriptions-item label="操作系统">{{ systemInfo.os }}</el-descriptions-item>
                  <el-descriptions-item label="Electron版本">{{ systemInfo.electronVersion }}</el-descriptions-item>
                  <el-descriptions-item label="Chrome版本">{{ systemInfo.chromeVersion }}</el-descriptions-item>
                  <el-descriptions-item label="Node版本">{{ systemInfo.nodeVersion }}</el-descriptions-item>
                </el-descriptions>
              </div>
              
              <div class="action-buttons">
                <el-button type="primary" @click="checkForUpdates">检查更新</el-button>
                <el-button @click="openLicense">许可协议</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      
      <div class="settings-actions">
        <el-button type="primary" @click="saveSettings">保存设置</el-button>
        <el-button @click="resetSettings">重置设置</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

import { onMounted, watch } from 'vue';

const appSettings = ref({
  theme: 'system',
  primaryColor: '#409EFF',
  autoStart: false,
  minimizeToTray: true,
  language: 'zh-CN'
});

const loadSettings = () => {
  const saved = localStorage.getItem('appSettings');
  if (saved) {
    Object.assign(appSettings.value, JSON.parse(saved));
  }
};

loadSettings();

const devSettings = ref({
  devMode: false,
  logLevel: 'info',
  apiEndpoint: 'https://api.example.com'
});

const systemInfo = ref({
  os: 'Windows 10',
  electronVersion: '36.2.1',
  chromeVersion: '120.0.6099.109',
  nodeVersion: '20.18.0'
});

// 在实际应用中，这些函数会与Electron主进程通信
const applyTheme = (theme) => {
  const actualTheme = theme === 'system'
    ? window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
    : theme;
  document.documentElement.setAttribute('data-theme', actualTheme);
  // 应用CSS变量体系
  const root = document.documentElement;
  root.style.setProperty('--theme-mode', actualTheme);
  
  // 初始化全局过渡
  root.style.transition = `all ${getComputedStyle(root).getPropertyValue('--transition-duration')} ${getComputedStyle(root).getPropertyValue('--easing-smooth')}`;
  document.documentElement.style.setProperty('--background-color-secondary', actualTheme === 'dark' ? '#2d2d2d' : '#f5f7fa');
  document.documentElement.style.setProperty('--border-color-light', actualTheme === 'dark' ? '#434343' : '#e4e7ed');
};

const handleThemeChange = (theme) => {
  applyTheme(theme);
  localStorage.setItem('themePreference', theme);
};

watch(() => appSettings.value.theme, (newVal) => {
  applyTheme(newVal);
});

onMounted(() => {
  loadSettings();
  applyTheme(appSettings.value.theme);
  
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  const systemThemeHandler = e => {
    if (appSettings.value.theme === 'system') {
      applyTheme(e.matches ? 'dark' : 'light');
    }
  };
  
  mediaQuery.addEventListener('change', systemThemeHandler);
  
  return () => {
    mediaQuery.removeEventListener('change', systemThemeHandler);
  };
});

const saveSettings = () => {
  localStorage.setItem('themePreference', appSettings.value.theme);
  localStorage.setItem('appSettings', JSON.stringify(appSettings.value));
  localStorage.setItem('devSettings', JSON.stringify(devSettings.value));
  ElMessage.success('设置已保存');
};

const resetSettings = () => {
  appSettings.value = {
    theme: 'light',
    primaryColor: '#409EFF',
    autoStart: false,
    minimizeToTray: true,
    language: 'zh-CN'
  };
  
  devSettings.value = {
    devMode: false,
    logLevel: 'info',
    apiEndpoint: 'https://api.example.com'
  };
  
  ElMessage.info('设置已重置');
};

const clearCache = () => {
  ElMessage.success('缓存已清除');
};

const checkForUpdates = () => {
  ElMessage.info('正在检查更新...');
  setTimeout(() => {
    ElMessage.success('您的应用已是最新版本');
  }, 2000);
};

const openLicense = () => {
  ElMessage.info('打开许可协议');
};
</script>

<style lang="scss" scoped>
.settings-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--background-color-primary);
  transition: background-color 0.3s;
}

.settings-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #3a8ee6, #5ca9f5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.settings-card {
  margin-bottom: 30px;
  background-color: var(--background-color-secondary);
  transition: background-color 0.3s;
}

.settings-section {
  padding: 10px 0;
  
  h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-text-color);
    border-left: 4px solid var(--primary-color);
    padding-left: 10px;
  }
}

.settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color-light);
}

.about-app {
  text-align: center;
  padding: 20px 0;
  
  .app-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
  }
  
  h2 {
    border-left: none;
    padding-left: 0;
    margin-bottom: 5px;
  }
  
  .version {
    color: var(--info-color);
    margin-bottom: 15px;
  }
  
  p {
    margin-bottom: 20px;
    color: var(--regular-text-color);
  }
}

.system-info {
  max-width: 500px;
  margin: 0 auto 20px;
  text-align: left;
  
  h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--primary-text-color);
  }
}

.action-buttons {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .settings-container {
    padding: 10px;
  }
  
  .settings-title {
    font-size: 24px;
  }
  
  .settings-actions {
    flex-direction: column;
    gap: 10px;
  }
  
  .el-form-item {
    margin-bottom: 18px;
  }
}
</style>
